{% import 'IcsocIvrBundle:Ivr:node_fields.html.twig' as ivr %}
{% from 'IcsocUIBundle:Macro:actions.html.twig' import button %}
{% from 'IcsocUIBundle:Macro:formValidator.html.twig' import jqvalidator %}

<form class="form-horizontal" action="" method="post" id="form" name="form">
    {{ ivr.node_name()  }}
    <div class="form-group">
        <label for="form_api_url" class="col-sm-3 control-label no-padding-right">{{ "Api url"|trans }} <font color="red">*</font> </label>
        <div class="col-sm-9">
            <input type="url" id="form_api_url" name="form[api_url]" class="col-sm-6 input-sm">
            <span class="help-button col-xs-3 col-sm-1" data-rel="popover" data-trigger="hover" data-placement="bottom" data-content="{{ "http api_url help"|trans }}" title="" data-original-title="">?</span>
        </div>
    </div>
    <div class="form-group">
        <label for="form_api_params" class="col-sm-3 control-label no-padding-right">{{ "Api params"|trans }}  </label>
        <div class="col-sm-9" id="form_api_params">
        </div>
    </div>
    <div class="form-group">
        <label for="form_request_method" class="col-sm-3 control-label no-padding-right">{{ "Request method"|trans }}  </label>
        <div class="col-sm-9">
            <select id="form_request_method" name="form[request_method]" class="col-sm-6">
                <option value=""></option>
                {% for key, request_method in request_method %}
                    <option value="{{ key }}">
                        {{ request_method }}
                    </option>
                {% endfor %}
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="form_timeout" class="col-sm-3 control-label no-padding-right">{{ "Timeout"|trans }}  </label>
        <div class="col-sm-9">
            <select id="form_timeout" name="form[timeout]" class="col-sm-6">
                {% for key, timeout in timeout %}
                    <option value="{{ key }}">
                        {{ timeout }}
                    </option>
                {% endfor %}
            </select>
        </div>
    </div>
    <div id="form_variable_name_div" class="form-group">
        <label for="form_variable_name" class="col-sm-3 control-label no-padding-right">{{ "http variable names"|trans }} <font color="red">*</font> </label>
        <div class="col-sm-9">
            <input type="text" id="form_variable_name" name="form[variable_name]" class="col-sm-6 input-sm">
            <span class="help-button col-xs-3 col-sm-1" data-rel="popover" data-trigger="hover" data-placement="bottom" data-content="{{ 'http variable_names help'|trans }}" title="" data-original-title="">?</span>
        </div>
    </div>
    {{ ivr.is_tran_front }}
    {{ ivr.ivr_count() }}
    <div class="clearfix well well-sm">
        <div class="col-md-offset-4 col-md-8">
            {{ button('Save', 'btn-node-attr') }}
        </div>
    </div>
</form>
<script type="application/javascript" language="JavaScript">
    var paramsIndex = 0;

    $(document).ready(function() {
        setApiParames('');
        $("#form").validate({
            {{ jqvalidator() }}
            debug:true,
            rules: {
                'form[api_url]': {
                    required:true,
                    url: true
                },
                'form[variable_name]': {
                    required:true,
                    if_exist_variable:true
                }
            },
            messages: {
                'form[api_url]': {
                    required:"{{ 'Api Url cannot be empty'|trans  }}",
                    url:'{{ 'Please Input Correct Url'|trans }}'
                },
                'form[variable_name]': {
                    required:"{{ 'This field is required'|trans  }}",
                    if_exist_variable:"{{ 'variable illegal'|trans }}",
                }
            }
        });

        jQuery.validator.addMethod("if_exist_variable",function(value,element,params){
            var arr = value.replace(/，/gm,',').split(',');
            var flag = true;
            for(var i in arr){
                if ( checkVariableIfExist(arr[i]) == true) {
                    flag = false;
                    break;
                }
                if (checkVariable(arr[i]) == false) {
                    flag = false;
                    break;
                }
            }

            return flag;
        },"");

        jQuery.extend(jQuery.validator.messages, {
            'required':'{{ 'This field is required'|trans }}'
        });
    });

    /**
     * 设置接口参数HTML
     */
    function setApiParames(apiParams)
    {
        if (apiParams) {
            $.each(apiParams, function(index, value) {
                if (index == 0) {
                    if (value) {
                        createHtml(index,'plus',value);
                    }
                } else {
                    if (value) {
                    createHtml(index,'minus',value);
                    }
                }

            });
        } else {
            createHtml('0','plus','');
        }
    }

    function createHtml(index,type,apiParamsValue)
    {
        var params_type = 0;
        var params_name = '';
        var params_value = '';

        var $content = '<div id="form_api_params_'+index+'" style="margin-bottom: 1px">\
                    <select id="form_params_type_'+index+'" name="form[params_type][params_type]" class="params_type">\
                        <option value="0">{{ "Param Fixed Value"|trans }}</option>\
                        <option value="1">{{ "Param variable names"|trans }}</option>\
                    </select>\
                    <input type="text" value="" id="form_api_params_name_'+index+'" name="form[api_params_name]" class="input-sm col-sm-2" placeholder="{{ "Param Name"|trans }}">\
                    <input type="text" value="" id="form_api_params_value_'+index+'" name="form[api_params_value]" class="input-sm col-sm-2 params_value" placeholder="{{ "Param Value"|trans }}">\
                    <select id="form_api_params_value_variable_'+index+'" name="form[api_params_value]" class="input-sm col-sm-2 params_value_variable">\
                    </select>\
                    <button id="form_'+type+'_'+index+'" class="btn btn-info btn-xs '+type+'" type="button" title="">\
                        <i class="ace-icon fa fa-'+type+'"></i>\
                    </button></div>';
        $('#form_api_params').append($content);

        setVariableOption($("#form_api_params_value_variable_"+index));

        var $params_name = $("#form_api_params_name_"+index);
        var $params_value = $("#form_api_params_value_"+index);
        var $params_value_variable = $("#form_api_params_value_variable_"+index);

        if (apiParamsValue) {
            params_type = apiParamsValue.params_type;
            params_name = apiParamsValue.params_name;
            params_value = apiParamsValue.params_value;

            $params_name.val(params_name);
            $params_value.val(params_value);
            $params_value_variable.val(params_value);
            $("#form_params_type_"+index).val(params_type);
            switch (params_type) {
                case '0' :
                    $params_value_variable.addClass('hidden');
                    $params_value.removeClass('hidden');
                    break;
                case '1' :
                    $params_value.addClass('hidden');
                    $params_value_variable.removeClass('hidden');
                    break;
                default :
                    $params_value_variable.addClass('hidden');
                    break;
            }
        } else {
            $params_value_variable.addClass('hidden');
        }

        $('#form_params_type_'+index).on('change', function() {
            var value = $(this).val();
            var $params_value = $(this).siblings('.params_value');
            var $params_value_variable = $(this).siblings('.params_value_variable');
            switch(value){
                case '0':
                    $params_value.removeClass('hidden');
                    $params_value_variable.addClass('hidden');
                    break;
                case '1':
                    $params_value_variable.removeClass('hidden');
                    $params_value.addClass('hidden');
                    break;
            }
        });

        if (type== 'plus') {
            $('#form_plus_0').on('click', function() {
                createHtml(paramsIndex,'minus')
            });
        } else {
            $('#form_minus_'+index).on('click', function() {
                $(this).parent().remove();
            });
        }
        paramsIndex++;
    }
</script>
